<template>
  <div id="uNav">
    <router-link to="/index" active-class="active">
    <span class="iconfont icon-shangcheng"></span>
    <span>商城</span>
    </router-link>
    <router-link to="/class" active-class="active">
    <span class="iconfont icon-fenlei"></span>
    <span>分类</span>
    </router-link>
    <router-link to="cart" active-class="active">
    <span class="iconfont icon-gouwuche"></span>
    <span>购物车</span>
    </router-link>
    <router-link to="mine" active-class="active">
    <span class="iconfont icon-wo"></span>
    <span>我的</span>
    </router-link>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
#uNav{
    display: flex;
    justify-content: space-evenly;
    align-content: space-around;
    width: 7.5rem;
    height: 0.8rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: skyblue;
    z-index: 999;
}
#uNav span{
    font-size: 0.3rem;
}
a{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.active{
    color: red;
}
.icon-gouwuche:before {
    content: "\e899";
    font-size: 0.3rem;
}
.icon-shangcheng:before {
    content: "\e899";
    font-size: 0.3rem;
}
.icon-wo:before {
    content: "\e899";
    font-size: 0.3rem;
}
.icon-fenlei:before {
    content: "\e899";
    font-size: 0.3rem;
}
</style>
